<link rel="stylesheet" href="__CDN__/assets/addons/health/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/health/libs/common.css">
<style>
	/* 自隐藏浏览器滚动条 */
	::-webkit-scrollbar {
		display: none;
	}

	#configPlatform {
		color: #444;
		padding: 0 20px 40px 0;
		background-color: #fff;
		position: relative;
		height: calc(100vh - 40px);
		overflow-y: auto;
	}

	.wx-type .el-radio {
		margin-bottom: 10px;
		margin-right: 10px;
	}

	.platform-images {
		width: 60px;
		height: 60px;
		border-radius: 4px;
		position: relative;
		border: 1px solid #7438D5;
		margin-right: 10px;
		margin-bottom: 10px;
		margin-top: 10px;
	}

	.el-image {
		width: 100%;
		height: 100%;
		border-radius: 4px;
	}

	.del-image-btn {
		position: absolute;
		width: 14px;
		height: 14px;
		line-height: 14px;
		text-align: center;
		border-radius: 50%;
		font-size: 12px;
		font-weight: 600;
		background: #fff;
		color: #7438D5;
		top: -8px;
		right: -8px;
		font-size: 16px;
	}

	.add-img {
		width: 60px;
		height: 60px;
		border: 1px dashed #E6E6E6;
		border-radius: 4px;
		justify-content: center;
	}

	.form-item-tip {
		color: #999;
	}

	.form-item-tip > p {
		line-height: 20px;
	}

	.el-image__error {
		font-size: 12px
	}

	.divider-title {
		font-weight: 600;
		margin-bottom: 20px;
		color: #666;
		padding-left: 20px;
	}

	.el-input-group__append,
	.el-input-group__prepend {
		background: #f9f9f9;
	}

	.dialog-footer {
		position: fixed;
		right: 20px;
		bottom: 0px;
		width: 100%;
		background: #fff;
		padding: 30px 10px 30px;
	}

	.el-input-group__append {
		line-height: 30px !important;
	}

	#configPlatform .el-form-item__content .el-input-group {
		vertical-align: middle;
	}

	.detailForm-href {
		margin-left: 30px;
		flex-shrink: 0;
	}

	.detailForm-href a {
		color: #7438D5;
		cursor: pointer;
	}

	.select-option-container .option-item {
		width: 50%;
	}

	.detailForm-sender {
		margin-right: 20px;
	}

	.detailForm-sender:last-child {
		margin-right: 0px;
	}

	.local-ajax-upload-wrap label {
		color: #7536D0;
	}

	.local-ajax-upload-wrap .local-ajax-upload {
		display: none !important;
	}

	.sa-template-wrap {
		color: var(--sa-font);
	}

	.sa-template-wrap .title {
		width: inherit;
		background: rgba(245, 245, 245, 1);
		margin: 0 0 12px;
		font-size: 12px;
		display: flex;
		align-items: center;
	}

	.sa-template-wrap .key {
		padding: 0 16px;
		flex: 1;
	}

	.sa-template-wrap .oper {
		flex: none;
		width: 120px;
	}

	.sa-template-wrap .item {
		display: flex;
	}

	.sa-template-wrap .item > .el-form-item {
		flex: 1;
		margin-right: 0;
		margin-bottom: 24px;
		padding: 0 16px;
	}

	.sa-template-wrap .item > .el-form-item.oper {
		flex: none;
		width: 120px;
	}

	.sa-template-wrap .el-form-item__content {
		display: flex;
		align-items: center;
	}

	[v-cloak] {
		display: none
	}
</style>
<script src="__CDN__/assets/addons/health/libs/vue.js"></script>
<script src="__CDN__/assets/addons/health/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/health/libs/moment.js"></script>
<script src="__CDN__/assets/addons/health/libs/Sortable.min.js"></script>
<script src="__CDN__/assets/addons/health/libs/vuedraggable.js"></script>
<div id="configPlatform" class="shopro-container-scrollbar" v-cloak>
	<el-form :model="detailForm" ref="detailForm" label-width="168px" class="demo-detailForm">
		<div v-if="type=='health'">
			<el-form-item label="平台名称：">
				<el-input v-model="detailForm.name" placeholder="请输入平台名称" size="small"></el-input>
			</el-form-item>
			<el-form-item label="Logo：">
				<div class="display-flex">
					<div class="platform-images" v-if="detailForm.logo">
						<el-image :src="Fast.api.cdnurl(detailForm.logo)" fit="contain"
						          :preview-src-list="detailForm.logo_arr">
						</el-image>
						<div class="del-image-btn" @click="delImg('image','logo')">
							<i class="el-icon-error"></i>
						</div>
					</div>
					<div class="add-img display-flex" @click="attachmentSelect('image','logo')" v-if="!detailForm.logo">
						<i class="el-icon-plus"></i>
					</div>
				</div>
			</el-form-item>
		</div>
		<div v-if="type=='user'">
			<el-form-item label="默认头像：">
				<div class="display-flex">
					<div class="platform-images" v-if="detailForm.avatar">
						<el-image :src="Fast.api.cdnurl(detailForm.avatar)" fit="contain"
						          :preview-src-list="detailForm.avatar_arr">
						</el-image>
						<div class="del-image-btn" @click="delImg('image','avatar')">
							<i class="el-icon-error"></i>
						</div>
					</div>
					<div class="add-img display-flex" @click="attachmentSelect('image','avatar')"
					     v-if="!detailForm.avatar">
						<i class="el-icon-plus"></i>
					</div>
				</div>
				<div class="form-item-tip">第三方登录用户会默认使用已授权的头像和昵称</div>
			</el-form-item>
		</div>
		<div v-if="type=='withdraw'">
			<div class="divider-title">提现配置</div>
			<el-form-item label="自动到账：">
				<el-switch v-model="detailForm.withdraw_auto" active-color="#7438D5" inactive-color="#eee"
				           active-value="1" inactive-value="0">
				</el-switch>
				<div class="form-item-tip">开启后用户提现将自动审核通过并且自动打款</div>
			</el-form-item>
			<el-form-item label="手续费：">
				<el-input v-model="detailForm.service_fee" type="number" placeholder="请输入手续费" size="small">
					<template slot="append">%</template>
				</el-input>
			</el-form-item>
			<el-form-item label="每次最小提现金额：" prop="min" :rules="[
            { required: true, message: '请输入每次最小提现金额', trigger: 'blur' },
          ]">
				<el-input v-model="detailForm.min" type="number" placeholder="请输入最小提现金额" size="small">
					<template slot="append">元</template>
				</el-input>
			</el-form-item>
			<el-form-item label="每次最大提现金额：" prop="max" :rules="[
            { required: true, message: '请输入每次最小提现金额', trigger: 'blur' },
          ]">
				<el-input v-model="detailForm.max" type="number" placeholder="请输入最大提现金额" size="small">
					<template slot="append">元</template>
				</el-input>
			</el-form-item>
			<el-form-item label="每日最多提现次数：">
				<el-input v-model="detailForm.perday_num" type="number" placeholder="请输入每日最多提现次数"
				          size="small">
					<template slot="append">次</template>
				</el-input>
				<div class="form-item-tip">0为不限</div>
			</el-form-item>
		</div>
		<div v-if="type=='order'">
			<!-- <div v-if="detailForm.goods">
				<div class="divider-title">商品配置</div>
				<el-form-item label="库存预警阈值：">
					<el-input v-model="detailForm.goods.stock_warning" placeholder="请输入库存预警阈值" size="small">
						<template slot="append">个</template>
					</el-input>
				</el-form-item>
			</div> -->
			<div>
				<div class="divider-title">订单配置</div>
				<el-form-item label="自动关闭时间：">
					<el-input v-model="detailForm.order_auto_close" placeholder="请输入订单自动关闭时间" size="small">
						<template slot="append">分钟</template>
					</el-input>
				</el-form-item>
				<el-form-item label="自动收货时间：">
					<el-input v-model="detailForm.order_auto_confirm" placeholder="请输入订单自动收货时间" size="small">
						<template slot="append">天</template>
					</el-input>
				</el-form-item>
				<!-- <el-form-item label="自动评价时间：">
					<el-input v-model="detailForm.order_auto_comment" placeholder="请输入订单自动评价时间" size="small">
						<template slot="append">天</template>
					</el-input>
				</el-form-item>
				<el-form-item label="自动评价内容：">
					<el-input v-model="detailForm.order_comment_content" placeholder="请输入订单自动评价内容" size="small">
					</el-input>
				</el-form-item>
				<el-form-item label="客户评价内容：">
					<el-radio-group v-model="detailForm.user_reply">
						<el-radio label="0">管理员审核后发布</el-radio>
						<el-radio label="1">直接发布</el-radio>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="退款原因：">
					<div class="sa-template-wrap">
						<div class="title">
							<div class="key">原因</div>
							<div class="oper">操作</div>
						</div>
						<draggable :list="detailForm.refundCause" v-bind="$attrs" :animation="300"
							handle=".sortable-drag" item-key="element">
							<template v-for="(element, index) in detailForm.refundCause">
								<div class="item">
									<el-form-item class="key">
										<el-input placeholder="请输入原因" size="small" v-model="element.val"
											@input="inputRefundCause(index)">
										</el-input>
									</el-form-item>
									<el-form-item class="oper">
										<el-button @click="deleteRefundCause(index)" type="danger" plain size="small">删除
										</el-button>
										<i id="draggableHandle" class="el-icon-rank sortable-drag"
											style="padding-left: 8px;"></i>
									</el-form-item>
								</div>
							</template>
						</draggable>
						<el-button @click="addRefundCause" style="margin-left: 16px;" type="primary" plain size="small"
							icon="Plus">追加</el-button>
					</div>
				</el-form-item> -->
			</div>
			<!-- <div v-if="detailForm.invoice">
				<div class="divider-title">发票配置</div>
				<el-form-item label="可申请发票：">
					<el-switch v-model="detailForm.invoice.enable" active-color="#7438D5" inactive-color="#eee"
						active-value="1" inactive-value="0">
					</el-switch>
				</el-form-item>
				<el-form-item label="票面金额：">
					<el-radio-group v-model="detailForm.invoice.price_type">
						<el-radio label="goods_price">商品价格</el-radio>
						<el-radio label="pay_price">实际支付价格</el-radio>
					</el-radio-group>
				</el-form-item>
			</div> -->
		</div>
		<div v-if="type==='health_plus'">
			<el-form-item label="每日目标步数：">
				<el-input-number v-model="detailForm.goal_step" :min="1" :max="100000"
				                 label="请输入每日目标步数">
				</el-input-number>
			</el-form-item>
		</div>
		<div v-if="type=='wxMiniProgram'">
			<el-form-item label="小程序名称：">
				<el-input v-model="detailForm.name" placeholder="请输入小程序名称" size="small"></el-input>
			</el-form-item>
			<el-form-item label="小程序头像：">
				<div class="display-flex">
					<div class="goods-image-box display-flex" v-if="detailForm.avatar">
						<div class="platform-images">
							<el-image :src="Fast.api.cdnurl(detailForm.avatar)" fit="contain"
							          :preview-src-list="detailForm.avatar_arr">
							</el-image>
							<div class="del-image-btn" @click="delImg('image','avatar')">
								<i class="el-icon-error"></i>
							</div>
						</div>
					</div>
					<div class="add-img display-flex" @click="attachmentSelect('image','avatar')"
					     v-if="!detailForm.avatar">
						<i class="el-icon-plus"></i>
					</div>
				</div>
			</el-form-item>
			<el-form-item label="小程序码：">
				<div class="display-flex">
					<div class="goods-image-box display-flex" v-if="detailForm.qrcode">
						<div class="platform-images">
							<el-image :src="Fast.api.cdnurl(detailForm.qrcode)" fit="contain"
							          :preview-src-list="detailForm.qrcode_arr">
							</el-image>
							<div class="del-image-btn" @click="delImg('image','qrcode')">
								<i class="el-icon-error"></i>
							</div>
						</div>
					</div>
					<div class="add-img display-flex" @click="attachmentSelect('image','qrcode')"
					     v-if="!detailForm.qrcode">
						<i class="el-icon-plus"></i>
					</div>
				</div>
			</el-form-item>
			<el-form-item label="AppID：">
				<el-input v-model="detailForm.app_id" placeholder="请输入AppID" size="small"></el-input>
			</el-form-item>
			<el-form-item label="AppSecret：">
				<el-input v-model="detailForm.secret" placeholder="请输入AppSecret" size="small"></el-input>
			</el-form-item>
		</div>
	</el-form>
	<div class="dialog-footer">
		<div @click="submitFrom" class="dialog-cancel-btn display-flex-c cursor-pointer">取消</div>
		<div @click="submitFrom('yes')" class="dialog-define-btn display-flex-c cursor-pointer">确定</div>
	</div>
</div>